<template>
  <el-dialog
    :width="width"
    :title="title"
    class="dialog-wrapper"
    :visible.sync="visibleFlag"
    @close="handleDialogShow"
  >
    <slot></slot>
    <div class="slot-horizontal__entire"></div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visibleFlag = false">取消</el-button>
      <el-button type="primary" @click="handleDialogConfirm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
/**
 * 弹窗组件
 *
 * 属性:
 * visible: 显示隐藏
 * title: 标题
 * width: 宽度
 * 函数:
 * confirm: 确定的回调
 */

export default {
  name: "CustomDialog",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "标题"
    },
    width: {
      type: String,
      default: "600px"
    }
  },
  data() {
    return {
      visibleFlag: false
    };
  },
  watch: {
    visible() {
      this.visibleFlag = this.visible;
    }
  },
  methods: {
    handleDialogShow() {
      this.$emit("update:visible", false);
    },
    handleDialogConfirm() {
      this.visibleFlag = false;
      this.$emit("confirm");
    }
  }
};
</script>

<style lang="scss" scope>
.dialog-wrapper {
  // 插槽
  .slot-horizontal__entire {
    position: absolute;
    height: 1px;
    left: 0px;
    right: 0px;
    bottom: 52px;
    background: #e9e9e9;
  }

  .el-dialog__header {
    border-bottom: 1px solid #e9e9e9;
  }

  .el-dialog__footer {
    height: 56px;
  }
}
</style>
